<template>
  <el-form :model="roleFormData" class="demo-form-inline">
    <el-form-item label="角色名称">
      <el-input v-model="roleFormData.roleName" placeholder="请输入角色名称"></el-input>
    </el-form-item>
    <el-form-item label="权限字符">
      <el-input v-model="roleFormData.roleKey" placeholder="请输入权限字符"></el-input>
    </el-form-item>
    <el-form-item label="角色顺序">
      <el-input-number v-model="roleFormData.sort" class="mx-4" :min="0" :max="100" controls-position="right"/>
    </el-form-item>
    <el-form-item label="状态">
      <el-radio v-model="roleFormData.status" :label="1" size="middle">正常</el-radio>
      <el-radio v-model="roleFormData.status" :label="0" size="middle">停用</el-radio>
    </el-form-item>
    <el-form-item label="菜单权限">
      <el-checkbox v-model="permsStatus" :label="1" size="middle" @change="">展开/折叠</el-checkbox>
      <el-checkbox v-model="permsStatus" :label="2" size="middle">全选/全不选</el-checkbox>
      <el-checkbox v-model="permsStatus" :label="3" size="middle">父子联动</el-checkbox>
      <el-tree ref="roleTree" class="tree-border" :data="menuTree" show-checkbox
               node-key="id" :default-expand-all="isExpandAll" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {ref, getCurrentInstance, onMounted,unref,watch} from 'vue'
import MineTreeSelect from "@/components/select/mine-tree-select";
import * as roleApi from '@/api/system/role/index.js'
import {allRoutes} from '@/api/system/menu/index.js'

import {ElMessage} from "element-plus"


export default {
  name: "mine-role-add",
  components: {MineTreeSelect},
  props: {
    roleFormData: {
      required: true,
      default: {
        parentId: "0",
        startCreateTime: null,
        endCreateTime: null
      },
      type: Object
    }
  },
  setup(props) {
    const {proxy} = getCurrentInstance()
    const permsStatus = ref(3);
    const menuTree = ref([])
    const isExpandAll = ref(false)
    const roleTree = ref();
    const onSubmit = () => {
      let roleTreeRef = unref(roleTree)
      props.roleFormData.roleMenuList = roleTreeRef.getCheckedKeys(false)
      if (props.roleFormData.id) {
        roleApi.updateById(props.roleFormData).then(res => {
          if (res.success) {
            ElMessage({
              message: res.msg,
              type: 'success',
            })
            proxy.$bus.emit('submitRoleSuccess')
          } else {
            ElMessage({
              message: res.msg,
              type: 'warning',
            })
          }
        })
      } else {
        roleApi.save(props.roleFormData).then(res => {
          if (res.success) {
            ElMessage({
              message: res.msg,
              type: 'success',
            })
            proxy.$bus.emit('submitRoleSuccess')
          } else {
            ElMessage({
              message: res.msg,
              type: 'warning',
            })
          }

        })
      }

    }
    const initMenu = () => {
      allRoutes().then(res => {
        if (res.success) {
          menuTree.value = res.data
        } else {
          ElMessage({
            message: res.msg,
            type: 'warning',
          })
        }
      })
    }

    onMounted(() => {
      initMenu()
    })

    watch(() => props.roleFormData.roleMenuList,(newVal,oldVal) => {
      if(props.roleFormData.roleMenuList){
        let roleTreeRef = unref(roleTree)
        roleTreeRef.setCheckedKeys(props.roleFormData.roleMenuList,false)
      } else {
        let roleTreeRef = unref(roleTree)
        roleTreeRef.setCheckedKeys([],false)
      }
    })
    return {
      permsStatus,
      menuTree,
      isExpandAll,
      roleTree,
      onSubmit
    }
  }
}
</script>

<style scoped>

.el-input {
  width: 380px;
}

/* tree border */
.tree-border {
  margin-top: 5px;
  border: 1px solid #e5e6e7;
  background: #FFFFFF none;
  border-radius: 4px;
  width: 380px;
  height: 400px;
}

</style>
